<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
    <link rel="stylesheet" href="plugins/layui/css/layui.css">
    <script src="plugins/jquery/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="plugins/layui/layui.js"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
    <style>
        .demoInput{
            outline-style: none ;
            border: 1px solid #ccc;
            border-radius: 3px;
            padding: 12px ;
            width: 300px;
            font-size: 14px;
            font-weight: 300;
            font-family: "Microsoft soft";
        }
        .demoInput:focus{
            border-color: #66afe9;
            outline: 0;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
        }



    </style>
</head>
<body  >
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel1">预定信息</h4>
            </div>
            <div class="modal-body">

                <table class="layui-hide" id="test2" lay-filter="test" ></table>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<div style="margin-left: 400px">
    <!--    <button class="btn btn-primary btn-lg">添加服务预定</button>-->
    <!-- 按钮触发模态框 -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        添加小区活动信息
    </button>

    <button class="btn btn-primary btn-lg" id="ckbm"> 查看报名信息</button>

</div>
    <br>
    <br>
<div style="margin-left: 250px">



    <span style=" font-size: 18px;" >活动名称：</span>

    <input type="text" id="ssinput" class="demoInput" placeholder="输入活动名称"/>
    &nbsp; &nbsp; &nbsp; &nbsp;
    <button class="btn btn-primary btn-lg" id="ss">搜索</button>
    <button class="btn btn-primary btn-lg" id="ssqb">搜索全部</button>
    </div>
<!--    <br>-->
<!--    <br>-->
    <center>
    <div style="width: 80%">
        <table class="layui-hide" id="test" lay-filter="test" style="width:50%"></table>
    </div>

</center>
<!-- 添加小区活动的模态框（Mefodal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    <center>添加小区活动信息</center>
                </h4>
            </div>
            <div class="modal-body">
                <div class="form-group has-feedback">
                    <label> 活动名称</label>
                    <input class="form-control"  placeholder="活动名称" id="hdmc">
                </div>
                <div class="form-group has-feedback">
                    <label>小区名称</label>
                    <div>
                        <select class="form-select"  aria-label="Default select example" id="xqmc">
                        </select>
                    </div>
<!--                    <input class="form-control"  placeholder="小区名称" id="xqmc">-->
                </div>

                <div class="form-group has-feedback">
                    <label> 活动开始时间</label>
                    <input class="form-control" type="date"  placeholder="开始时间" id="kssj">
                </div>
                <div class="form-group has-feedback">
                    <label> 活动结束时间</label>
                    <input class="form-control" type="date" placeholder="结束时间" id="jssj">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" id="addbut">
                    添加
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!--修改信息模态框-->
<div class="modal fade" id="myModals" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="xgmyModalLabel">
                    <center>修改活动信息</center>
                </h4>
            </div>
            <div class="modal-body">
                <div class="form-group has-feedback">
                    <label> 活动开始时间</label>
                    <input class="form-control"  placeholder="活动开始时间" id="hdkssj">
                </div>
                <div class="form-group has-feedback">
                    <label>活动结束时间</label>
                    <input class="form-control"  placeholder="活动结束时间" id="hdjssj">
                </div>
                <div class="form-group has-feedback">
                    <label>活动状态</label>
                    <input class="form-control"  placeholder="结束时间" id="hdzt">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary" id="xgaddbut">
                    修改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<script type="text/html" id="barDemo">


    <button lay-event="xg" class="btn btn-info " data-toggle="modal" data-target="#myModals" style="margin-top:-5px"> <span class="glyphicon glyphicon-pencil"></span> </button>
    <button lay-event="sc" class="btn btn-warning" style="margin-top:-5px"><span class="glyphicon glyphicon-trash" ></span> </button>

</script>
<script>

    function  ff(){
        window.location.href="activity.html"
    }


    /**
     * 查看活动订单
     */
    $("#ckbm").on("click",function (){
        $ ('#myModal1').modal ('show');
        layui.use('table', function () {
            var table = layui.table;
            let datas = []

            function getAllRoles() {
                $.ajax({
                    url: "ckhdxx",
                    type: "post",
                    success: function (resp) {
                        datas = resp
                        console.log(resp)

                    }
                })

                setTimeout(function () {
                    table.render({
                        elem: '#test2'
                        // , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                        , cols: [[ //表头
                            {field: 'xxname', title: '预约名称'}
                            , {field: 'yyname',height:60, title: '预约人姓名'}

                        ]]
                        , data: datas
                        , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                            layout: ['count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                            , groups: 3 //只显示 1 个连续页码
                            , first: false //不显示首页
                            , last: false //不显示尾页
                            , limit: 4
                        }
                        , height: '250'
                    });
                }, 100)

            }

            setTimeout(function () {
                //延迟加载
                getAllRoles()
                // window.location.href="servicebook.html"
            }, 100);
        });
    })



    /**
     * 获取小区名称，赋值给select
     */
    $.ajax({
        url:"getxqmc",
        type:"post",
        success:function(data){
            let se=$("#xqmc")
            for(i=0;i<data.length;i++){
                let op=document.createElement("option")
                op.innerHTML=data[i]
                se.append(op)
            }
            console.log(data);
        }

    })




    layui.use('table', function () {
        var table = layui.table;
        let datas = []

        function getAllRoles() {
            $.ajax({
                url: "huodongxx",
                type: "post",
                success: function (resp) {
                    datas = resp
                    console.log(resp)

                }
            })

            setTimeout(function () {
                table.render({
                    elem: '#test'
                    // , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                    , cols: [[ //表头
                        {field: 'hdxh', title: '活动序号'}
                        , {field: 'hdmc', title: '活动名称'}
                        , {field: 'ksj', title: '活动开始时间'}
                        , {field: 'jssj', title: '活动结束时间'}
                        , {field: 'zt', title: '状态'}
                        , {field: 'xqmc', title: '关联小区'}
                        , {title: '操作', align: 'center', toolbar:'#barDemo'}
                    ]]
                    , data: datas
                    , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                        layout: ['count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                        , groups: 3 //只显示 1 个连续页码
                        , first: false //不显示首页
                        , last: false //不显示尾页
                        , limit: 4
                    }
                    , height: '250'
                });
            }, 100)

        }

        setTimeout(function () {
            //延迟加载
            getAllRoles()
            // window.location.href="servicebook.html"
        }, 100);

        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据

            var layEvent= obj.event;

            if(layEvent === 'xg'){
                $ ('#myModals').modal ('show');
                let xgkssj=$("#hdkssj").val(data.ksj);
                let xfjssj=$("#hdjssj").val(data.jssj);
                let xgzt=$("#hdzt").val(data.zt);

                $("#xgaddbut").on("click",function (){
                    $ ('#myModals').modal ('hide');
                    let hdxh=data.hdxh;
                    let hdkssj=$("#hdkssj").val();
                    let hdjssj=$("#hdjssj").val();
                    let hdzt=$("#hdzt").val();

                    xiugaiinfo(hdxh,hdkssj,hdjssj,hdzt)
                })


            }else if(layEvent === 'sc'){

                let hdxh=data.hdxh;

                del(hdxh);

            }

        })


    });

    //搜索
    $("#ss").on("click",function (){

        let hdmc=$("#ssinput").val();

        layui.use('table', function () {
            var table = layui.table;
            let datas = []

            function getAllRoles() {
                $.ajax({
                    url: "sousuo",
                    data:{"hdmc":hdmc},
                    type: "post",
                    success: function (resp) {
                        datas = resp
                        console.log(resp)

                    }
                })

                setTimeout(function () {
                    table.render({
                        elem: '#test'
                        // , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                        , cols: [[ //表头
                            {field: 'hdxh', title: '活动序号'}
                            , {field: 'hdmc', title: '活动名称'}
                            , {field: 'ksj', title: '活动开始时间'}
                            , {field: 'jssj', title: '活动结束时间'}
                            , {field: 'zt', title: '状态'}
                            , {field: 'xqmc', title: '关联小区'}
                            , {title: '操作', align: 'center', toolbar:'#barDemo'}
                        ]]
                        , data: datas
                        , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                            layout: ['count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                            , groups: 3 //只显示 1 个连续页码
                            , first: false //不显示首页
                            , last: false //不显示尾页
                            , limit: 4
                        }
                        , height: '250'
                    });
                }, 100)

            }

            setTimeout(function () {
                //延迟加载
                getAllRoles()
                // window.location.href="servicebook.html"
            }, 100);

            table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据

                var layEvent= obj.event;

                if(layEvent === 'xg'){
                    $ ('#myModals').modal ('show');
                    let xgkssj=$("#hdkssj").val(data.ksj);
                    let xfjssj=$("#hdjssj").val(data.jssj);
                    let xgzt=$("#hdzt").val(data.zt);

                    $("#xgaddbut").on("click",function (){
                        $ ('#myModals').modal ('hide');
                        let hdxh=data.hdxh;
                        let hdkssj=$("#hdkssj").val();
                        let hdjssj=$("#hdjssj").val();
                        let hdzt=$("#hdzt").val();

                        xiugaiinfo(hdxh,hdkssj,hdjssj,hdzt)
                    })


                }else if(layEvent === 'sc'){

                    let hdxh=data.hdxh;

                    del(hdxh);

                }

            })


        });


    })


    //删除活动信息

    function del(hdxh){

        $.ajax({
            url:"delhdxx",
            type:"post",
            data:{"hdxh":hdxh},
            success:function(data){
                if(data){
                    layer.msg("删除成功", {icon: 6})
                    setTimeout("ff()","1100");

                }else {
                    layer.msg("删除失败", {icon: 2})
                    setTimeout("ff()","1100");
                }
            }
        })
    }

    // 修改活动信息方法
    function  xiugaiinfo(hdxh,hdkssj,hdjssj,hdzt){
        $.ajax({
            url:"hdxiugai",
            type:"post",
            data:{"hdxh":hdxh,"hdkssj":hdkssj,"hdjssj":hdjssj,"hdzt":hdzt},
            success: function(data){
                if(data){
                    layer.msg("修改成功", {icon: 6})
                    setTimeout("ff()","1100");


                }else {
                    layer.msg("修改失败", {icon: 2})
                    setTimeout("ff()","1100");

                }
            }
        })
    }

    //添加活动信息
    $("#addbut").on("click",function (){
        $ ('#myModal').modal ('hide');

        let hdmc=$("#hdmc").val();
        let xqmc=$("#xqmc").val();
        let kssj=$("#kssj").val();
        let jssj=$("#jssj").val();
        $.ajax({
            url:"addhdxx",
            type:"post",
            data:{"hdmc":hdmc,"xqmc":xqmc,"kssj":kssj,"jssj":jssj},
            success:function(data){
                if (data){
                    layer.msg("添加成功", {icon: 6})
                    setTimeout("ff()","1100");

                }else {
                    layer.msg("添加失败", {icon: 2})
                    setTimeout("ff()","1100");
                }

            }
        })
    })

    //查询全部，页面刷新
    $("#ssqb").on("click",function (){
        window.location.href="activity.html"
    })
</script>
</body>
</html>